<template>
  <!-- 角色管理 -->
  <div class="door">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item>
        <el-button
          type="primary"
          @click="roleAdd"
          size="mini"
          icon="el-icon-plus"
          v-if="isauth('lock_role_edit')"
        >添加</el-button>
      </el-form-item>
      <el-form-item class="searchmarigin">
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
    </el-form>
    <!-- 角色管理信息显示 -->
    <div class="my_table">
      <el-table
        v-loading="loading"
        :data="detailslist"
        ref="table"
        border
        highlight-current-row
        style="width: 100%"
        :header-cell-style="(header) => headFirst(header, 2)"
        height="calc(100vh  - 220px)"
            :cell-style="(res) => headFirst_col(res, [],2)"
        
      >
        <el-table-column
          prop="roleName"
          label="角色名称"
          v-if="formThead.userName.checked"
          align="center"
          min-width="110px"
        ></el-table-column>
        <!-- 有效时间 -->
        <el-table-column
          prop="startTime"
          label="开始时间"
          v-if="formThead.endTime.checked"
          align="center"
          min-width="150px"
        ></el-table-column>
        <!-- 有效时间 -->
        <el-table-column
          prop="endTime"
          label="结束时间"
          v-if="formThead.endTime.checked"
          align="center"
          min-width="150px"
        ></el-table-column>
        <el-table-column
          prop="backLock"
          label="反锁开门"
          v-if="formThead.backLock.checked"
          align="center"
          width="40px"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.backLock" :disabled="true"></el-checkbox>
          </template>
        </el-table-column>
        <!-- 开门-礼拜 -->
        <el-table-column prop="Sunday" label="星期" v-if="formThead.Sunday.checked" align="center">
          <el-table-column prop="monday" label="一" align="center" width="35px">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.monday" :disabled="true" style="padding: 0"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="tuesday" label="二" align="center" width="35px">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.tuesday" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="wednesday"
            label="三"
            v-if="formThead.wednesday.checked"
            align="center"
            width="35px"
            :disabled="true"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.wednesday" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="thursday"
            label="四"
            v-if="formThead.thursday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.thursday" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="friday"
            label="五"
            v-if="formThead.friday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.friday" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="saturday"
            label="六"
            v-if="formThead.saturday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.saturday" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            prop="sunday"
            label="日"
            v-if="formThead.sunday.checked"
            align="center"
            width="35px"
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.sunday" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 星期时段 -->
        <el-table-column
          prop="SundayTime"
          label="星期时段"
          v-if="formThead.SundayTime.checked"
          align="center"
        >
          <el-table-column
            prop="mondayTimeStageIndex"
            label="一"
            v-if="formThead.mondayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="tuesdayTimeStageIndex"
            label="二"
            v-if="formThead.tuesdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>

          <el-table-column
            prop="wednesdayTimeStageIndex"
            label="三"
            v-if="formThead.wednesdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>

          <el-table-column
            prop="thursdayTimeStageIndex"
            label="四"
            v-if="formThead.thursdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="fridayTimeStageIndex"
            label="五"
            v-if="formThead.fridayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="saturdayTimeStageIndex"
            label="六"
            v-if="formThead.saturdayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
          <el-table-column
            prop="sundayTimeStageIndex"
            label="日"
            v-if="formThead.sundayTimeStageIndex.checked"
            align="center"
            width="38px"
          ></el-table-column>
        </el-table-column>
        <!-- 假日时段 -->
        <el-table-column
          prop="holidayTimeStageIndex"
          label="假日时段"
          v-if="formThead.holidayTimeStageIndex.checked"
          align="center"
          width="40px"
        ></el-table-column>
        <el-table-column label="操作" width="100" align="center" v-if="isauth('lock_role_edit')">
          <template slot-scope="scope">
            <el-button type="text" @click="roleEdit(scope.row)" size="small">修改</el-button>
            <el-button
              type="text"
              @click.stop="deleteDate(scope.row.roleGuid)"
              size="small"
              style="color: red"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import bus from '@/bus.js'
export default {
  data() {
    return {
      // 导出表格名称
      filename: '角色管理信息',
      elform: {},
      // 默认选择的quyu
      defaultArea: '',
      // 区域列表
      areaInfoList: [],
      // 楼栋默认
      defaultBuilding: '',
      // 楼栋列表
      buildingInfoList: [],
      // 房间号信息
      roomName: '',
      // 姓名/编号/卡号信息
      userName: '',
      loading: false,
      // 房内授权信息
      detailslist: [],
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      searchInfo: {},
      // 授权信息表头
      formThead: {
        userName: {
          label: '用户',
          prop: 'userName',
          checked: true
        },
        departmentName: {
          label: '编号',
          prop: 'departmentName',
          checked: true
        },
        cardNumber: {
          label: '卡号',
          prop: 'cardNumber',
          checked: true
        },
        endTime: {
          label: '开门有效期',
          prop: 'endTime',
          checked: true
        },
        backLock: {
          label: '反锁开门',
          prop: 'backLock',
          checked: true
        },
        Sunday: {
          label: '星期',
          prop: 'backLock',
          checked: true
        },
        monday: {
          label: '星期一',
          prop: 'monday',
          checked: true
        },

        tuesday: {
          label: '星期二',
          prop: 'tuesday',
          checked: true
        },
        wednesday: {
          label: '星期三',
          prop: 'wednesday',
          checked: true
        },
        thursday: {
          label: '星期四',
          prop: 'thursday',
          checked: true
        },
        friday: {
          label: '星期五',
          prop: 'friday',
          checked: true
        },
        saturday: {
          label: '星期六',
          prop: 'saturday',
          checked: true
        },
        sunday: {
          label: '星期日',
          prop: 'sunday',
          checked: true
        },
        SundayTime: {
          label: '星期时段',
          prop: 'SundayTime',
          checked: true
        },
        mondayTimeStageIndex: {
          label: '星期一',
          prop: 'mondayTimeStageIndex',
          checked: true
        },
        tuesdayTimeStageIndex: {
          label: '星期二',
          prop: 'tuesdayTimeStageIndex',
          checked: true
        },
        wednesdayTimeStageIndex: {
          label: '星期三',
          prop: 'wednesdayTimeStageIndex',
          checked: true
        },
        thursdayTimeStageIndex: {
          label: '星期四',
          prop: 'thursdayTimeStageIndex',
          checked: true
        },
        fridayTimeStageIndex: {
          label: '星期五',
          prop: 'fridayTimeStageIndex',
          checked: true
        },
        saturdayTimeStageIndex: {
          label: '星期六',
          prop: 'saturdayTimeStageIndex',
          checked: true
        },
        sundayTimeStageIndex: {
          label: '星期七',
          prop: 'sundayTimeStageIndex',
          checked: true
        },
        holidayTimeStageIndex: {
          label: '假日时段',
          prop: 'holidayTimeStageIndex',
          checked: true
        },
        empowerType: {
          label: '授权状态',
          prop: 'empowerType',
          checked: true
        }
      }
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    },
    isRole() {
      return this.$store.state.common.isRole
    }
  },
  watch: {
    isRole(newVal, oldVal) {
      console.log(newVal)
      if (!newVal) {
        this.onSubmit()
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
  },
  mounted() {
    this.onSubmit();
    bus.$on('listenToA', this.getHeaderDate)
  },
  methods: {
    set(val) {
      this.$store.commit('common/updateRole', val)
    },
    // 查询角色
    onSubmit() {
      this.searchInfo.unitGuid = this.changeschoolid
      this.pageNum = 1
      this.getManagement()
    },
    // 获取角色
    getManagement() {
      this.$http({
        url: this.$http.adornUrl('/terminal/doorLock/empower-role-search-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          // this.$message({
          //   message: "查询成功",
          //   type: "success"
          // });
          let list = JSON.parse(JSON.stringify(data.messageContent.data))
          list.map(item => {
            item.backLock = item.backLock == 1 ? true : false
            item.monday = item.monday == 1 ? true : false
            item.tuesday = item.tuesday == 1 ? true : false
            item.wednesday = item.wednesday == 1 ? true : false
            item.thursday = item.thursday == 1 ? true : false
            item.friday = item.friday == 1 ? true : false
            item.saturday = item.saturday == 1 ? true : false
            item.sunday = item.sunday == 1 ? true : false
          })
          this.detailslist = list
          this.currentPage = data.messageContent.pageNum
          this.recordCount = data.messageContent.recordCount
          if (data.messageContent.data.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出数据需要用到的
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    // 导出数据获取
    onExport() {
      if (this.recordCount == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning'
        })
        return false
      }
      this.$http({
        url: this.$http.adornUrl('/terminal/doorLock/empower-role-search-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: 1,
            pageSize: this.recordCount,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          let list = JSON.parse(JSON.stringify(data.messageContent.data))
          this.inExport(list)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出
    inExport(detailslist) {
      require.ensure([], () => {
        let multiHeader = [
          [
            '角色名称',
            '开始时间',
            '结束时间',
            '反锁开门',
            '星期',
            '',
            '',
            '',
            '',
            '',
            '',
            '星期时段',
            '',
            '',
            '',
            '',
            '',
            '',
            '假日时段'
          ]
        ]
        let merges = [
          'A1:A2',
          'B1:B2',
          'C1:C2',
          'D1:D2',
          'E1:K1',
          'L1:R1',
          'S1:S2'
        ]
        let tHeader = [
          '角色名称',
          '开始时间',
          '结束时间',
          '反锁开门',
          '一',
          '二',
          '三',
          '四',
          '五',
          '六',
          '日',
          '一',
          '二',
          '三',
          '四',
          '五',
          '六',
          '日',
          '假日时段'
        ]
        let filterValArr = [
          'roleName',
          'startTime',
          'endTime',
          'backLock',
          'monday',
          'tuesday',
          'wednesday',
          'thursday',
          'friday',
          'saturday',
          'sunday',
          'mondayTimeStageIndex',
          'tuesdayTimeStageIndex',
          'wednesdayTimeStageIndex',
          'thursdayTimeStageIndex',
          'fridayTimeStageIndex',
          'saturdayTimeStageIndex',
          'sundayTimeStageIndex',
          'holidayTimeStageIndex'
        ]
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const filterVal = filterValArr
        const list = detailslist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: this.filename + this.getimeto(),
          tableheader: '2'
        })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getManagement()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getManagement()
    },
    getHeaderDate(val) {
      this.formThead = val
    },

    // 删除模板
    deleteDate(roleGuid) {
      this.$confirm('此操作将删除该模板数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.roleDel(roleGuid)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 删除
    roleDel(roleGuid) {
      console.log(roleGuid)
      this.$http({
        url: this.$http.adornUrl('/terminal/doorLock/empower-role-delete'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            roleGuid,
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          console.log(this.pageNum)
          this.pageNum = this.currentPage
          this.onSubmit()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    roleAdd() {
      this.set(true)
      this.$router.push('/door-lock-role-add-modify')
    },
    // 修改
    roleEdit(row) {
      this.set(true)
      this.$router.push({
        path: '/door-lock-role-modification',
        query: {
          id: row.roleGuid
        }
      })
      console.log()
    }
  }
}
</script>

<style lang="scss" scoped>
.door {
  padding: 10px;
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 5px;
  }
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
}
.page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>